<template>
  <div class="card-list">

<!--    添加企业弹窗-->
    <a-modal v-model="addCardShow" title="新增企业信息" @ok="handleOk">
      <a-form>
        <a-form-item
            label="企业名称"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="填写参选企业正式名称" v-model="title"/>
        </a-form-item>
        <a-form-item
            label="企业介绍"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-textarea rows="4" placeholder="简要介绍企业信息" v-model="synopsis"/>
        </a-form-item>
      </a-form>
    </a-modal>
<!--    修改企业信息-->
    <a-modal v-model="changeCardShow" title="修改企业信息" @ok="submitChange">
      <a-form>
        <a-form-item
            label="企业名称"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="填写参选企业正式名称" v-model="title"/>
        </a-form-item>
        <a-form-item
            label="企业介绍"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-textarea rows="4" placeholder="简要介绍企业信息" v-model="synopsis"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-list
        :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
        :dataSource="enterpriseList"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="item.add">
          <a-button class="new-btn" type="dashed" @click="showAddModal">
            <a-icon type="plus" />新增企业
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <div style="margin-bottom: 3px" slot="title">{{item.company_name}}</div>
              <a-avatar class="card-avatar" slot="avatar" :src="avatar" size="large" />
              <div class="meta-content" slot="description">{{item.company_tip}}</div>
            </a-card-meta>
            <a slot="actions" @click="showChangeModal(item.company_name, item.company_tip, item.company_id)">修改</a>
            <a slot="actions" @click="showDrawer(item.company_id)">申报人列表</a>
            <a slot="actions" :href="'#/form/declarant?enterprise='+item.company_name">添加申报人</a>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
<!--    申报人列表抽屉-->
    <a-drawer
        title="申报人列表"
        placement="right"
        :closable="false"
        :visible="visible"
        @close="onClose"
    >
      <p v-for="item in this.declarantList" :key="item.company_user_id"><a @click="goModifyDeclarant(item)">{{ item.company_username }}</a></p>
    </a-drawer>
  </div>
</template>

<script>
import Axios from 'axios'

// 前端占位用数据，已废弃
const dataSource = []
dataSource.push({
  add: true
})
for (let i = 0; i < 6; i++) {
  dataSource.push({
    company_id: i,
    company_name: '某某企业',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
    company_tip: '企业介绍，我们是个好公司，选我吧'
  })
}

export default {
  name: 'AddEnterpriseMsg',
  data () {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      desc: '参选企业单位一览，可以添加或修改企业信息，也可以添加参选单位的负责人信息',
      linkList: [
        {icon: 'rocket', href: '/#/', title: '快速开始'},
        {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
        {icon: 'file-text', href: '/#/', title: '产品文档'}
      ],
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      // 添加企业弹窗是否可见
      addCardShow: false,
      // 修改卡片弹窗是否可见
      changeCardShow: false,
      // 抽屉是否可见
      visible: false,
      // 企业名称
      title: "",
      // 企业id
      enterpriseId: 0,
      // 企业简介
      synopsis: "",
      changeId: 0,
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
      // 所有企业列表
      enterpriseList: [],
      // 相关企业申报人列表
      declarantList: [],
      dataSource
    }
  },
  methods: {
    showAddModal() {
      this.addCardShow = true
    },
    handleOk(e) {
      console.log(e)
      // dataSource.push({
      //   title: this.title,
      //   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
      //   content: this.synopsis
      // })
      // 后端添加企业
      Axios.post(this.url + '/pxManagerSystem/insertCompanyInfos', {
        company_name: this.title,
        company_tip: this.synopsis
      }).then((res) => {
        console.log(res)
        // 前端显示添加后结果
        this.enterpriseList.push({
          company_name: this.title,
          company_tip: this.synopsis
        })
      }).then(() => {
        this.title = this.synopsis = ""
      }).catch((err) => {
        console.log(err)
      })
      this.addCardShow = false
    },
    showChangeModal(title, content, id) {
      this.title = title
      this.synopsis = content
      this.changeId = id
      this.changeCardShow = true
    },
    // 修改
    submitChange() {
      Axios.put(this.url + '/pxManagerSystem/updateCompanyInfoByCompanyInfoId', {
        company_id: this.changeId,
        company_name: this.title,
        company_tip: this.synopsis
      }).then(res => {
        console.log(res)
        // 前端显示修改结果
        this.enterpriseList.forEach(item => {
            if (item.company_id === this.changeId) {
              item.company_name = this.title
              item.company_tip = this.synopsis
            }
        })
      }).then(() => {
        this.title = this.synopsis = ""
      }).catch(err => {
        console.log(err)
      })
      // dataSource.forEach(item => {
      //   if(item.id === this.changeId) {
      //     item.title = this.title
      //     item.content = this.synopsis
      //   }
      // })
      this.changeCardShow = false
    },
    // 打开抽屉，访问后端相关企业旗下的申报人
    showDrawer(id) {
      this.enterpriseId = id
      Axios.post(this.url + '/pxManagerSystem/getAllCompanyUsersByCompanyId', {
        company_id: this.enterpriseId
      }).then(res => {
        if(res.data.state === 200) {
          this.declarantList = res.data.data.companyUsersList
        }else {
          this.$message.error(res.data.message)
        }
      })
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.enterpriseId = 0
    },
    // 向修改申报人信息页面传参
    goModifyDeclarant(item){
      this.$router.push({
        name: '修改申报人信息',
        params:{
          item: item
        }
      })
      this.enterpriseId = 0
    }
  },
  mounted() {
    Axios.get(this.url + '/pxManagerSystem/getAllCompanyInfos')
    .then(res => {
      console.log(res.data.data.companyInfoList)
      this.enterpriseList.push({
        add: true
      })
      this.enterpriseList = this.enterpriseList.concat(res.data.data.companyInfoList)
    })
  }
}
</script>

<style lang="less" scoped>
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.new-btn{
  border-radius: 2px;
  width: 100%;
  height: 187px;
}
.meta-content{
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 64px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

</style>
